<template>
    <view class="page">
        <view class="m-panel-bd">
            <view class="m-media-box m-media-box-small-appmsg">
                <view :class="{'m-cells':1, iconBoxLattice:1}">
                    <block v-for="(item, i) in PersonalCenterList.list" :key="i">
                        <view v-if="(item.id==3 && item.isShow)" data-url="/member/order/list?kind_id=1202" class="m-cell m-cell-access"
                              @click="goTabBar">
                            <view class="m-cell-hd " :style="{color:(item.color)}">
                                <label class="iconfont icon-time"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('我的预约')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </view>
                        <navigator v-if="(item.id==6 && item.isShow&&isMembership)" url="/member/member/task" class="m-cell m-cell-access">
                            <view class="m-cell-hd" :style="{color:item.color}">
                                <label class="iconfont icon-zuanshi"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <label>{{__('会员中心')}}</label>
                                <label style="color:#717171;margin-right:8rpx;float:right;" v-if="(PersonalCenterList.type!=2)">{{sprintf(__('你有%s积分'), UserInfo.user_points)}}</label>
                            </view>
                            <text class="m-cell-ft"></text>
                        </navigator>

                        <navigator v-if="(item.id==7 && item.isShow)" url="/member/member/favorites" class="m-cell m-cell-access">
                            <view class="m-cell-hd" :style="{color:(item.color)}">
                                <label class="iconfont icon-liwu"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('商品收藏')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </navigator>
                        <view v-if="(item.id==8 && item.isShow)" @click="selectAddress" class="m-cell m-cell-access">
                            <view class="m-cell-hd" :style="{color:(item.color)}">
                                <label class="iconfont icon-shouhuodizhi "></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('收货地址')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </view>
                        <navigator v-if="(item.id==9 && item.isShow&&isAbtVendor)" url="../about-store/about-store" class="m-cell m-cell-access">
                            <view class="m-cell-hd " :style="{color:(item.color)}">
                                <label class="iconfont icon-store"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('关于商家')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </navigator>
                        <navigator v-if="(item.id==10 && item.isShow)" url="/member/member/feedback" class="m-cell m-cell-access">
                            <view class="m-cell-hd " :style="{color:(item.color)}">
                                <label class="iconfont icon-yonghufankui1"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('用户反馈')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </navigator>

                        <navigator v-if="(item.id==12 && item.isShow)" url="/integratShop/integralPage/integralPage" class="m-cell m-cell-access">
                            <view class="m-cell-hd " style="color:#db384c">
                                <label class="iconfont icon-jifenshangcheng-"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <p>{{__('积分商城')}}</p>
                            </view>
                            <text class="m-cell-ft"></text>
                        </navigator>

                        <view v-if="(item.id==11 && item.isShow)" class="m-cell m-cell-access" @click="cleanCache">
                            <view class="m-cell-hd " :style="{color:item.color}">
                                <label class="iconfont zc zc-qingchuhuancun"></label>
                            </view>
                            <view class="m-cell-bd m-cell-primary">
                                <label>{{__('清除缓存')}}</label>
                                <label style="color:#717171;margin-right:8rpx;float:right;"  v-if="(PersonalCenterList.type!=2)">{{currentSize}}KB</label>
                            </view>
                            <text class="m-cell-ft"></text>
                        </view>
                    </block>
                </view>
            </view>
        </view>

    </view>
</template>


<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        name: "asset",
        data: function() {
            return {
                message: "",
                signMsg: "",
                UserInfo: "",
                flag: false,
                flag1: false,
                isSign: true
            }
        },
        computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
        onLoad: function(options) {
            uni.setNavigationBarTitle({
                title:this.__('')
            });

            var that = this;


            this.forceUserInfo(function(user) {
                that.setData({
                    UserInfo: user
                });
                that.load();
            });

        },
        methods: {
            ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
            load: function() {
                var that = this,
                    params = {
                        user_id: this.userInfo.user_id,
                    };

                that.$.request({
                    url: this.Config.URL.user.signState,
                    data: params,
                    success: function(data, status, msg, code) {
                        that.setData({
                            isSign: data.state == 250 ? 1 : 0
                        })
                    }
                });


                that.setData({
                    message: this.userInfo
                })
                /*
                that.getUserData(function(user_data) {
                    that.getUserResource(function(resource) {
                        resource['user_level_name'] = user_data.member_info.user_level_name
                        resource['user'] = user_data

                        if (that.$.isNull(resource.user_growth)) {
                            resource.user_growth = 0;
                        }

                        that.setData({
                            message: resource
                        })
                    });
                });
                */

            },

            click: function() {
                var that = this,
                    param = {
                        user_id: this.userInfo.user_id,
                        store_id: this.shopInfo.store_id
                    };

                that.$.request({
                    url: this.Config.URL.user.signIn,
                    data: param,
                    success: function(data, status, msg, code) {

                        that.setData({
                            flag: !that.$.isNull(data)
                        });
                        that.setData({
                            signMsg: msg
                        });
                        if (200 == status) {
                            that.setData({
                                flag: true
                            });
                            setTimeout(function() {
                                that.setData({
                                    flag: false
                                })
                            }, 2e3)
                        } else {
                            that.setData({
                                flag1: true
                            });
                            setTimeout(function() {
                                that.setData({
                                    flag1: false
                                })
                            }, 2e3);
                        }

                        that.load()
                    }
                });
            }

        }
    };
</script>


<style lang="scss">

    @import "../../styles/_variables.scss";

    .member-top {
        -webkit-animation: changeBg 20s infinite;
        animation: changeBg 20s infinite;
        background-color: #ff6700;
        background-image: url("");
        background-size: cover;
        text-align: center;
        width: 100%;
        /*height: 11rem;*/

        overflow: hidden;
        height: 320rpx;

        color: #fff;
        position: relative;
        z-index: 1;
    }

    @-webkit-keyframes changeBg {
        0% {
            background-color: #ff6700
        }

        90% {
            background-color: #ff6700
        }

        10% {
            background-color: #FB6E52
        }

        20% {
            background-color: #FFCE55
        }

        30% {
            background-color: #A0D468
        }

        40% {
            background-color: #48CFAE
        }

        50% {
            background-color: #4FC0E8
        }

        60% {
            background-color: #5D9CEC
        }

        70% {
            background-color: #AC92ED
        }

        80% {
            background-color: #EC87BF
        }
    }

    @keyframes changeBg {
        0% {
            background-color: #ff6700
        }

        90% {
            background-color: #ff6700
        }

        10% {
            background-color: #FB6E52
        }

        20% {
            background-color: #FFCE55
        }

        30% {
            background-color: #A0D468
        }

        40% {
            background-color: #48CFAE
        }

        50% {
            background-color: #4FC0E8
        }

        60% {
            background-color: #5D9CEC
        }

        70% {
            background-color: #AC92ED
        }

        80% {
            background-color: #EC87BF
        }
    }

    .m-banner-img {
        width: 100%;
        /*height: 200rpx;*/
        vertical-align: top;
        position: relative;
    }

    .m-user-info {
        position: absolute;
        top: 115rpx;
        width: 140rpx;
        height: 140rpx;
        text-align: center;
        left: 50%;
        margin-left: -70rpx;
        z-index: 3;
        color: #666;
    }

    .m-user-info image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 120rpx;
        border: 1px solid #fff;
        vertical-align: middle;
        box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);
    }

    .m-user-info text {
        line-height: 70rpx;
        display: block;
        font-size: 28rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #fff;
        font-weight: bold;
    }

    .m-user-info .Phone {
        width: 140rpx;
        height: 140rpx;
        border-radius: 120rpx;
        border: 1px solid #fff;
        vertical-align: middle;
        box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35);
        overflow: hidden;
    }

    .m-user-info .NickName {
        line-height: 70rpx;
        display: block;
        font-size: 28rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .member-order-tab {
        font-size: 12px;
        text-align: center;
        background: rgba(0, 0, 0, .1);
        line-height: 20px;
        /*box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);*/

        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .i-type {
        font-size: 40rpx;
    }

    .m-cell-hd {
        text-align: center;
        line-height: 56rpx;
    }

    .member-order-tab .g-flex-item {
        padding: 28rpx 0 20rpx 0;
    }

    .member-order-tab .g-flex-item:active {
        background-color: #ececec;
    }

    .my_od {
        border-left: 1px solid #dfdfdf;
    }

    .all_order {
        position: relative;
        display: block;
    }

    .m-panel-bd {
        margin-top: 40rpx;
    }

    .m-panel-bd label {
        vertical-align: middle;
        font-size: 50rpx;
        margin: 0rpx 10rpx;
    }

    .m-cell-primary {
        font-size: 14px;
        margin-top: 10rpx;

        label {
            font-size: 14px;
        }
    }

    .m-animate-img {
        width: 100%;
        height: 250rpx;
        overflow: hidden;
        -webkit-animation: imageAnimation 15s linear infinite alternate;
        animation: imageAnimation 15s linear infinite alternate;
        webkit-backface-visibility: hidden;
        -webkit-filter: blur(5px);
        filter: blur(5px);
        margin-top: -20px;
    }

    .m-animate-warp {
        overflow: hidden;
        height: 200rpx;
        -webkit-animation: imageAnimation 15s linear infinite alternate;
        animation: imageAnimation 15s linear infinite alternate;
    }

    @-webkit-keyframes imageAnimation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 0 100%;
        }
    }

    @keyframes imageAnimation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 0 100%;
        }
    }

    .iconBoxLattice .m-cell {
        display: inline-block;
        width: 25%;
        box-sizing: border-box;
        text-align: center;
        border-right: 1rpx solid #f8f8f8;
        border-bottom: 1rpx solid #f8f8f8;
    }

    .iconBoxLattice .m-cell .iconfont {
        font-size: 60rpx;
    }

    .iconBoxLattice .m-cell::before {
        border: none;
    }

    .iconBoxLattice .m-cell p {
        font-size: 24rpx;
    }

    .iconBoxLattice .m-cell image {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 60rpx !important;
        height: 60rpx !important;
    }

    .iconBoxLattice .m-cell-ft {
        display: none;
    }


    .msk {
        position: fixed;
        top: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .model {
        width: 80%;
        height: 290rpx;
        background: #fff;
        border-radius: 6rpx;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .hint {
        height: 200rpx;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .hint::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 1px solid #e5e5e5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

    .hint .title {
        font-size: 36rpx;
    }

    .hint .content {
        width: 80%;
        color: #999999;
        font-size: 30rpx;
        margin-top: 20rpx
    }

    .operation {
        height: 90rpx;
        display: flex;
        align-items: center
    }

    .cancel,
    .success {
        flex: 1;
        background: #fff;
        height: 90rpx;
        font-size: 36rpx
    }

    button::after {
        line-height: none
    }

    .cancel {
        position: relative;
        text-align: center;
        line-height: 90rpx
    }

    .success {
        color: #3cc51f;
        padding: 0
    }

    .cancel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-right: 2px solid #e5e5e5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
</style>
